<template>
  <div
    class="backgroud"
    :style="{
      backgroundImage: 'url(' + audio.coverImgUrl + ')',
      backgroundRepeat: 'no-repeat',
      backgroundPositionX: 'center',
      backgroundPositionY: 'center',
      backgroundSize: 'cover',
    }"
  >
    <div id="float_text" class="up_area" style="z-index: 1001">
      <span id="comment"></span>
      {{ this.audio.musicInfo.comment }}
      <br />
      <span id="comment_from" style="float: right"
        >——{{ this.audio.musicInfo.comment_from }}</span
      >
    </div>

    <div id="grid_mask" class="up_area" style="z-index: 101"></div>
    <div id="music_cover_bg" class="music_cover up_area" style="z-index: 100">
      <div id="music_cover" class="up_area" style="z-index: 102"></div>
    </div>

    <audio
      ref="audio"
      :src="audio.musicInfo.musicUrl"
      :preload="audio.preload"
      @play="onPlay"
      @ended="nextMusic"
      @error="onError"
      @waiting="onWaiting"
      @pause="onPause"
      @timeupdate="onTimeupdate"
      @loadedmetadata="onLoadedmetadata"
    ></audio>

    <div class="bar_backgroud_div up_area" style="z-index: 1000">
      <div class="playBar up_area">
        <div style="width: 95%; margin: 0 auto">
          <el-slider
            v-model="audio.currentTime"
            @change="changeCurrentTime"
            :max="audio.maxTime"
            :step="0.1"
            :format-tooltip="formatTooltip"
          ></el-slider>
        </div>
      </div>
      <div class="bar_contral_div up_area">
        <div id="" class="class_btn up_area">
          <div id="prve_btn" v-on:click="lastMusic" class="class_prve"></div>
          <div
            id="play_btn"
            class="class_play"
            v-on:click="startPlayOrPause"
            @mouseenter="enterPlayBtn"
            @mouseleave="leavePlayBtn"
            :style="{
              backgroundImage: playOrPauseImg,
            }"
          ></div>
          <div id="next_btn" v-on:click="nextMusic" class="class_next"></div>
        </div>
      </div>
    </div>

    <div id="music_name" class="class_music_name up_area" style="z-index: 1001">
      {{ this.audio.musicInfo.name }}
    </div>

    <div id="volume_div" class="class_volume_div" style="z-index: 1001">
      <input
        id="volume_range"
        class="rangeVolume"
        type="range"
        min="0"
        max="100"
        value="music"
        v-on:input="changeVolume($event.target.value)"
      />
    </div>
    <div class="about" v-on:click="viewAbout"></div>

    <div
      id="float_text_about"
      v-show="infoDisplay"
      class="up_area"
      style="z-index: 1001"
      v-html="this.info"
    >
    </div>
  </div>
</template>

<script>
export default {
  props: {},
  data() {
    return {
      playList: [
        {
          name: "AniFace - 夜、萤火虫和你",
          musicUrl:
            "http://musichost.nightcat.ink/AniFace%20-%20%E5%A4%9C%E3%80%81%E8%90%A4%E7%81%AB%E8%99%AB%E5%92%8C%E4%BD%A0.mp3",
          picList: [
            "http://pichost.nightcat.ink/1625384375990.jpg",
            "http://pichost.nightcat.ink/1625384390680.jpg",
            "http://pichost.nightcat.ink/1625384402594.jpg",
          ],
          comment:
            "你和萤火虫有两个共同点，在我的眼里都会发光，同时，都已经很多年没见了。",
          comment_from: "网易云音乐",
        },
        {
          name: "七结音 - 似此星辰非昨夜",
          musicUrl:
            "http://musichost.nightcat.ink/%E4%B8%83%E7%BB%93%E9%9F%B3%20-%20%E4%BC%BC%E6%AD%A4%E6%98%9F%E8%BE%B0%E9%9D%9E%E6%98%A8%E5%A4%9C.mp3",
          picList: [
            "http://pichost.nightcat.ink/1625384688722.jpg",
            "http://pichost.nightcat.ink/1625384706857.jpg",
            "http://pichost.nightcat.ink/1625384718328.jpg",
          ],
          comment: "“深夜仰望星空的人一定很孤独吧”",
          comment_from: "网易云音乐",
        },
        {
          name: "七结音 - 愿我如星君如月",
          musicUrl:
            "http://musichost.nightcat.ink/%E4%B8%83%E7%BB%93%E9%9F%B3%20-%20%E6%84%BF%E6%88%91%E5%A6%82%E6%98%9F%E5%90%9B%E5%A6%82%E6%9C%88.mp3",
          picList: [
            "http://pichost.nightcat.ink/1625384895195.jpg",
            "http://pichost.nightcat.ink/1625384910168.jpg",
            "http://pichost.nightcat.ink/1625384920606.jpg",
          ],
          comment: "愿我如星君如月，夜夜流光相皎洁",
          comment_from: "网易云音乐",
        },
      ],

      audio: {
        currentTime: 0,
        maxTime: 0,
        playing: false, //是否自动播放
        muted: false, //是否静音
        speed: 1,
        waiting: true,
        preload: "auto",
        ImgIndex: 0,
        bgtime: undefined,
        coverImgUrl: "",
        nowPlayIndex: 0,
        musicInfo: undefined,
      },
      info: "",
      infoDisplay: false,
      playBtnImgs: [
        "url(" + require("../assets/images/UI/img_play_btn.png") + ")",
        "url(" + require("../assets/images/UI/img_play_btn_hover.png") + ")",
      ],
      pauseBtnImgs: [
        "url(" + require("../assets/images/UI/img_pause_btn.png") + ")",
        "url(" + require("../assets/images/UI/img_pause_btn_hover.png") + ")",
      ],
      playOrPauseImg:
        "url(" + require("../assets/images/UI/img_play_btn.png") + ")",
    };
  },
  created: function () {
    this.audio.musicInfo = this.playList[0];
    this.loadImgDisplay();
  },
  mounted: function () {},
  methods: {
    // 使用mouseenter做播放按钮移入事件
    enterPlayBtn(event) {
      if (this.audio.playing) {
        this.playOrPauseImg = this.pauseBtnImgs[1];
      } else {
        this.playOrPauseImg = this.playBtnImgs[1];
      }
    },
    // 使用mouseleave做播放按钮移出事件
    leavePlayBtn(event) {
      if (this.audio.playing) {
        this.playOrPauseImg = this.pauseBtnImgs[0];
      } else {
        this.playOrPauseImg = this.playBtnImgs[0];
      }
    },
    //显示关于
    viewAbout() {
      this.info = "Develop by  <a target='_blank' href='https://gitee.com/Nightcats'>NC</a>  ,  <a target='_blank' href='https://gitee.com/abcdefgfgfgfg'>玄兔</a>   <br><br> 2021-7-4";
      this.infoDisplay = true;
      setTimeout(() => {
        this.infoDisplay = false;
      }, 8000);
    },
    // 进度条Tip时间格式显示
    formatTooltip(val) {
      let time = parseInt(val);
      return (
        parseInt(time / 60) +
        ":" +
        (time % 60 < 10 ? "0" + (time % 60) : time % 60)
      );
    },
    // 上一曲
    lastMusic() {
      if (this.audio.nowPlayIndex - 1 < 0) {
        this.info = "没有上一曲";
        this.infoDisplay = true;
        setTimeout(() => {
          this.infoDisplay = false;
        }, 3000);
        this.audio.nowPlayIndex = 0;
      } else {
        this.audio.musicInfo = this.playList[--this.audio.nowPlayIndex];
        this.audio.waiting = true;
        this.$refs.audio.src = this.audio.musicInfo.musicUrl;
        setTimeout(() => {
          this.$refs.audio.play();
          this.playOrPauseImg =
            "url(" + require("../assets/images/UI/img_pause_btn.png") + ")";
        }, 150);
      }
    },
    // 下一曲
    nextMusic() {
      if (this.audio.nowPlayIndex + 1 > this.playList.length - 1) {
        this.info = "没有下一曲";
        this.infoDisplay = true;
        setTimeout(() => {
          this.infoDisplay = false;
        }, 3000);
        this.audio.nowPlayIndex = this.playList.length - 1;
      } else {
        this.audio.musicInfo = this.playList[++this.audio.nowPlayIndex];
        this.audio.waiting = true;
        this.$refs.audio.src = this.audio.musicInfo.musicUrl;
        setTimeout(() => {
          this.$refs.audio.play();
          this.playOrPauseImg =
            "url(" + require("../assets/images/UI/img_pause_btn.png") + ")";
        }, 150);
      }
    },
    // 加载图片显示
    loadImgDisplay() {
      clearInterval(this.audio.bgtime);
      this.audio.musicInfo.picList = this.rand_array(
        this.audio.musicInfo.picList
      );
      this.audio.coverImgUrl =
        this.audio.musicInfo.picList[this.audio.ImgIndex];
      this.audio.bgtime = setInterval(this.carouselTimer, 4500);
    },
    // 图片轮播定时器
    carouselTimer() {
      this.audio.coverImgUrl =
        this.audio.musicInfo.picList[this.audio.ImgIndex];
      this.audio.ImgIndex++;
      if (this.audio.ImgIndex > this.audio.musicInfo.picList.length - 1) {
        this.audio.ImgIndex = 0;
      }
    },
    // 随机化数组
    rand_array(object_array) {
      let array_length = object_array.length;
      let rand_count = parseInt(array_length / 2);
      while (rand_count > 1) {
        let posA = Math.floor(Math.random() * array_length);
        let posB = Math.floor(Math.random() * array_length);
        let temp = object_array[posA];
        object_array[posA] = object_array[posB];
        object_array[posB] = temp;
        rand_count--;
      }
      return object_array;
    },
    // 音量改变
    changeVolume(index = 0) {
      this.$refs.audio.volume = index / 100;
      this.volume = index;
    },
    // 播放跳转
    changeCurrentTime(index) {
      this.$refs.audio.currentTime = index;
      this.$refs.audio.play();
    },
    // 播放按钮播放暂停切换
    startPlayOrPause() {
      if (this.audio.playing) {
        this.playOrPauseImg = this.playBtnImgs[1];
        this.pausePlay();
      } else {
        this.playOrPauseImg = this.pauseBtnImgs[1];
        this.startPlay();
      }
    },
    // 开始播放
    startPlay() {
      this.$refs.audio.play();
    },
    // 暂停
    pausePlay() {
      this.$refs.audio.pause();
    },
    // 当音频暂停
    onPause() {
      this.audio.playing = false;
    },
    // 当发生错误, 就出现loading状态
    onError() {
      this.audio.waiting = true;
    },
    // 当音频开始等待
    onWaiting(res) {
      // this.audio.waiting = true;
      // console.log(res);
    },
    // 当音频开始播放
    onPlay(res) {
      this.audio.playing = true;
      this.audio.loading = false;
    },
    // 当timeupdate事件大概每秒一次，用来更新音频流的当前播放时间
    onTimeupdate(res) {
      if (
        document.getElementsByClassName(
          "el-tooltip el-slider__button hover dragging"
        ).length == 0
      ) {
        this.audio.currentTime = res.target.currentTime;
      }
    },
    // 当加载语音流元数据完成后，会触发该事件的回调函数
    // 语音元数据主要是语音的长度之类的数据
    onLoadedmetadata(res) {
      this.audio.waiting = false;
      this.audio.maxTime = parseInt(res.target.duration);
      this.$emit("loading-true", 11);
    },
  },
};
</script>

<style>
/* CSS Document */
html body {
  width: 100%;
  height: 100%;
}

.about {
  border-style: solid;
  border-width: 0px 0px 20px 20px;
  border-color: transparent transparent rgb(11, 99, 105) transparent;
  width: 0px;
  height: 0px;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: 1000;
}

.about:hover {
  border-style: solid;
  border-width: 0px 0px 20px 20px;
  border-color: transparent transparent rgb(115, 208, 214) transparent;
  width: 0px;
  height: 0px;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: 1000;
}

.backgroud {
  width: 100%;
  height: 100%;
}

#float_text {
  width: auto;
  max-width: 20%;
  height: auto;
  bottom: 100px;
  right: 30px;
  padding: 10px;
  position: fixed;
  background-color: #ffffff89;
  color: #00000089;
  font-family: "微软雅黑";
}

#float_text:hover {
  background-color: #ffffffe0;
}

#float_text_about {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: auto;
  max-width: 20%;
  height: auto;
  padding: 10px;
  background-color: #ffffffc9;
  color: #00000089;
  font-family: "微软雅黑";
}

#grid_mask {
  width: 100%;
  height: 100%;
  background-image: url("../assets/images/UI/grid.png");
}

#up_area {
  width: 100%;
  float: left;
  height: 94%;
}

.rangeVolume {
  background-size: 98% 3px;
  margin: auto;
  width: 80%;
  background: linear-gradient(to right, #ccc 0%, #ccc 100%);
  outline: none;
  -webkit-appearance: none; /*清除系统默认样式*/
  height: 3px; /*横条的高度*/
}

input[type="range"]::-webkit-slider-thumb {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  -webkit-appearance: none;
  border: 0;
}

.class_music_name {
  color: #55aaff;
  font-family: "微软雅黑";
  float: left;
  bottom: 20px;
  left: 20px;
  position: fixed;
}

.class_music_name:hover {
  color: #69f3ff;
  background-color: #8a949389;
  font-family: "微软雅黑";
  float: left;
  bottom: 20px;
  left: 20px;
  position: fixed;
}

.class_volume_div {
  color: #fff;
  font-family: "微软雅黑";
  float: left;
  right: 80px;
  bottom: 26px;
  /* margin-right: 20px; */
  position: fixed;
}

.class_btn {
  width: 300px;
  margin-left: 15%;
  margin-right: 15%;
  display: flex;
  justify-content: center;
}

.class_prve {
  margin: 0 30px;
  width: 40px;
  height: 40px;
  float: left;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-image: url("../assets/images/UI/img_prve_btn.png");
  transition: all 0.3s;
}

.class_prve:hover {
  margin: 0 30px;
  width: 40px;
  height: 40px;
  float: left;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-image: url("../assets/images/UI/img_prve_btn_hover.png");
  transition: all 0.3s;
}

.class_play {
  margin: 0 30px;
  width: 40px;
  height: 40px;
  float: left;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-image: url("../assets/images/UI/img_play_btn.png");
}

/* .class_play:hover {
  margin: 0 30px;
  width: 40px;
  height: 40px;
  float: left;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-image: url("../assets/images/UI/img_play_btn_hover.png");
} */

.class_pause {
  margin: 0 30px;
  width: 40px;
  height: 40px;
  float: left;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-image: url("../assets/images/UI/img_pause_btn.png");
}

.class_pause:hover {
  margin: 0 30px;
  width: 40px;
  height: 40px;
  float: left;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-image: url("../assets/images/UI/img_pause_btn_hover.png");
}

.class_next {
  margin: 0 30px;
  width: 40px;
  height: 40px;
  float: left;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-image: url("../assets/images/UI/img_next_btn.png");
}

.class_next:hover {
  margin: 0 30px;
  width: 40px;
  height: 40px;
  float: left;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-image: url("../assets/images/UI/img_next_btn_hover.png");
}

.bar_contral_div {
  width: 100%;
  margin-top: 30px;
  display: flex;
  justify-content: center;
}

.bar_backgroud_div {
  width: 100%;
  height: 6%;
  min-height: 80px;
  position: fixed;
  display: flex;
  bottom: 0;
  justify-content: center;
  flex-wrap: wrap;
  background: #ffffff64;
}

.playBar {
  width: 100%;
  height: 20px;
  position: fixed;
  text-align: center;
}

#music_cover_bg {
  /* width: 100%;
  height: 100%; */
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: center;
  background-size: cover;
  box-sizing: border-box;
}

#music_cover_bg:after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  background-size: 200% 200%;
  left: 0;
  top: 0;
  background: inherit;
  filter: blur(50px);
}

/* CSS Document */
body,
html,
div,
ul,
li,
a {
  margin: 0;
  padding: 0;
}
body,
html {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  font-family: "微软雅黑";
}
.BarControl {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  display: inline-block;
}
.BarBeginTime {
  width: 40px;
  height: 20px;
  color: #fff;
  font-size: 8px;
  line-height: 20px;
}
.TheBar {
  position: relative;
  width: calc(100% - 114px);
  margin-left: 2px;
  height: 4px;
  border-radius: 2px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  background: #ebe8e8;
  overflow: visible;
}
.TheColorBar {
  width: 0px;
  border-radius: 0px;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  height: 100%;
  background: #3498db;
  float: left;
}
.TimeBall {
  width: 10px;
  height: 10px;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  background: #3498db;
  position: absolute;
  left: 0px;
  top: -3px;
  z-index: 2;
  cursor: pointer;
}
.BarTimeBall {
  width: 10px;
  height: 10px;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  background: #3498db;
  position: absolute;
  left: 0px;
  top: -3px;
  z-index: 2;
  cursor: pointer;
}
.BarFinishTime {
  width: 40px;
  height: 20px;
  color: #fff;
  font-size: 8px;
  line-height: 20px;
}
.BarBeginTime,
.BarFinishTime,
.TheBar {
  display: inline-block;
  vertical-align: middle;
  padding: 0px;
}
</style>